<html>
    <head>
        <title>Задание №5</title>
        <script type="text/javascript" data-dojo-config="parseOnLoad: true" src="/dojo/dojo/dojo.js"></script>
        <script type="text/javascript">
            //<!--
            dojo.require("dijit.form.Form");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.ValidationTextBox");
            dojo.require("dijit.form.NumberTextBox");
            dojo.require("dijit.form.ComboBox");
            dojo.require("dijit.form.SimpleTextarea");
        </script>
        <style type="text/css" media="screen">
            @import "/dojo/dijit/themes/tundra/tundra.css";
            @import "/dojo/dojo/resources/dojo.css";
        </style>
    </head>
    <body class="tundra">
        <h1>
            Задаие № 5
        </h1>

        <form enctype="application/x-www-form-urlencoded" action="" method="post" id="dojoForm" data-dojo-type="dijit.form.Form">
            <script type="dojo/method" data-dojo-event="onKeyUp">
                if (this.isValid()) {
                    dijit.byId('fSubmit').setAttribute('disabled', false);
                } else {
                    dijit.byId('fSubmit').setAttribute('disabled', 'disabled');
                }
            </script>
            
            <table>
                <tbody>
                    <tr>
                        <td colspan="2"><b>Основная информация</b></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td id="name-label">
                            <label for="name" class="required">Имя</label>
                        </td>
                        <td class="element">
                            <input type="text" data-dojo-type="dijit.form.ValidationTextBox" required="true" maxLength="15" name="name" id="name" value="">
                        </td>
                    </tr>
                    <tr>
                        <td id="surname-label">
                            <label for="surname" class="optional">Фамилия</label>
                        </td>
                        <td class="element">
                            <input type="text" data-dojo-type="dijit.form.ValidationTextBox" required="true" maxLength="15" name="surname" id="surname" value="">
                        </td>
                    </tr>
                    <tr>
                        <td id="phone-label">
                            <label for="phone" class="optional">Номер телефона</label>
                        </td>
                        <td class="element">
                            Код страны:    <input data-dojo-type="dijit.form.NumberTextBox" constraints="{min:0,max:99,places:0}" maxLength="2" type="text" name="phone[country]" id="phoneCountry" value="">
                             - код города: <input data-dojo-type="dijit.form.NumberTextBox" constraints="{min:0,places:0, pattern:'####'}" maxLength="4" type="text" name="phone[city]" id="phoneCity" value=""> 
                             - номер:      <input data-dojo-type="dijit.form.NumberTextBox" constraints="{min:0,places:0, pattern:'#######'}" maxLength="8" type="text" name="phone[number]" id="phoneNumber" value="">
                             - доп. номер: <input data-dojo-type="dijit.form.NumberTextBox" constraints="{min:0,places:0, pattern:'####'}" maxLength="4" type="text" name="phone[more]" id="phoneMore" value="">
                        </td>
                    </tr>
                    <tr>
                        <td id="city-label">
                            <label for="city" class="optional">Город</label>
                        </td>
                        <td class="element">
                            <select name="city" id="city" data-dojo-type="dijit.form.ComboBox">
                                <option value="1" label="СПб">СПб</option>
                                <option value="2" label="Белгород">Белгород</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><b>Другая информация</b></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td id="comment-label">&nbsp;</td>
                        <td class="element">
                            <textarea data-dojo-type="dijit.form.SimpleTextarea" name="comment" id="comment" rows="24" cols="80"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="button" colspan="2">
                            <button id="fSubmit" disabled="disabled" data-dojo-type="dijit.form.Button" type="submit">Отправить</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>